<template>
<div>
<!--  组件-->
  <div style="position: sticky;top:0;left:0;z-index: 999;overflow: hidden">
    <van-nav-bar
        left-text="返回"
        left-arrow
        title="用户订单"
        @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="search" size="20" />
      </template>
    </van-nav-bar>
  <van-tabs v-model="active" swipeable animated>
    <van-tab v-for="(item,index) in list" :title='item' :key="index" @click="onClick()"></van-tab>
  </van-tabs>
</div>
<!--  -->

  <div class="order" v-for="(item,index) in shopList.list" :key="index">
    <!-- 收货地址 -->
    <div class="address">
      <div><span :class='[{"addspan":item.address.isDefault}]'>默认</span>&nbsp;&nbsp;<span class="span1">{{item.address.address}}</span></div>
      <p style="margin-left:14px">{{item.address.ress}}</p>
      <div style="margin-bottom:10px"><span class="span" >{{item.address.name}}</span> <span class="span">{{item.address.tel}}</span></div>
    </div>
    <van-row type="flex" style="overflow: hidden;margin-top:10px" justify="space-between" >
      <van-col span="21">
        <!-- 商品列表 -->
        <van-card
            :num="item.shop.CkeckedLiat[0].selectedNum"
            :price="parseInt(item.shop.CkeckedLiat[0].selectedSkuComb.price/100).toFixed(2)"
            desc="软件测试数据"
            :title="item.shop.CkeckedLiat[0].name"
            :thumb="item.shop.CkeckedLiat[0].img"
        >
          <template #footer>
            <van-row type="flex" justify="end">
              <van-col span="8" style="text-align:center;">小计:<span style="color: red;line-height: 28px">{{parseInt(item.shop.CkeckedLiat[0].selectedSkuComb.price/100)*item.shop.CkeckedLiat[0].selectedNum}}</span></van-col>
              <van-col span="1"></van-col>
              <van-col span="8" class="addclass">
              </van-col>
            </van-row>
          </template>
        </van-card>
      </van-col>
    </van-row>
    <div style="text-indent: 1em;line-height:48px;border:1px sandybrown solid;height:48px">
      <van-col span="6">更多</van-col>
      <van-col  span="6">挑选服务</van-col>
      <van-col span="6">追加评价</van-col>
      <van-col span="6" @click="setmu(item)">查看物流</van-col>
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: "orderList",
  data(){
    return{
      active:0,
      list:['全部','待发货','待收货','待评价'],
    }
  },
  methods:{
    setmu(obj){
      this.$router.push({
        path:'/newlist',
        query:{obj},
      })
    },
    onClickLeft(){
      this.$router.back();
    },
    onClick(name,index){
      console.log(name,index)
    },
  },
  computed:{
    shopList(){
      return this.$store.getters["addorder/getorder"]
    }
  },
}
</script>

<style scoped lang="less">
.order{box-shadow:1px 1px silver;margin:10px 0 40px 0}
.address{position: relative;margin:6px;font-size:12px;box-sizing: border-box;border-bottom:4px #1989fa solid;}
.van-icon-contact:before{
  content:''
}
.span1{font-size:14px}
.icon{position: absolute;top:30%;right:10%;font-size:18px}
.span{padding:4px 0 0 14px}
.addspan{margin-left:14px;background:red;color:white}
.reovm{height:100%;background: red;text-align: center;color: #fafafa;line-height: 132px}
.van-row{background: #fafafa}
.van-col{position: relative}
.van-col>.van-checkbox{position:absolute;top:50%;left: 50%;transform:translateX(-50%)translateY(-50%)}
.van-card__price{font-size:14px}
</style>